<template>
  <div>
    <Header />
    <div class="backorg">
      <div class="longe"></div>
      <div class="con_aon">
        <div class="ta_list">
          <div class="top">
            <div class="list">
              <div class="afafaafafaf">
                <div class="d_ofne_e box">
                  <div class="topen_e">
                    <img src="@/assets/img/aa.png" alt />
                  </div>
                  <div class="tat_aa_e">
                    <span>Lua嘟嘟</span>
                    <span class="sj">5200.15.01</span>
                  </div>
                </div>
                <div class="opt">+关注</div>
              </div>

              <div class="ado_oo">
                <p>
                  【没钱了！#世界最大印钞厂发出破产警告#：有198年历史，为英国等140个国家印制钞票】据
                  RT12月8日报道，为英国等140个国家印制钞票的德拉鲁公司发出可能破产的警告。德拉鲁公司
                  是一家英国纸币制造商，从1860年起就为英国央行印制钞票，也是世界最大的印钞厂，印制世
                  界上约1/3的钞票。如果德拉鲁公司无 ​​​
                </p>
              </div>
              <like />
              <div class="ado_oo">
                <div>
                  <template>
                    <div id="app">
                      <div class="demo">
                        <div-editors
                          :min-height="50"
                          :max-height="300"
                          :placeholder="placeholder"
                          v-model="userInput"
                          class="publish-box"
                          @sendMessage="sendMessage"
                        ></div-editors>
                        <hr style="width:746px" />
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="ado_oo">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="用户管理" name="first">
                    <div class="first_nei">
                      <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                      <div>
                        <span>订二想哒哒</span><span>:</span>{{rong}}
                      </div>
                    </div>
                    <div class="first_dz">
                      <div>12月26日13：21</div>
                      <div><span>回复</span>|<span>赞26</span></div>
                    </div>
                    <div class="first_san">
                      <span>yHhah等人</span><span>共62条回复</span>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="配置管理" name="second">按热度</el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import divEditors from "@/components/div-editors";
import like from "@/components/like";
export default {
  components: {
    Header,
    Footer,
    divEditors,
    like
  },
  data() {
    return {
      placeholder: "请输入你的想法",
      userInput: "",
      activeName: 'first',
      rong:"我真的非常难过，满满原本那么好看！！！为什么一定要追求双眼皮了！！！你原本那么美啊啊啊 只追求这是因为还没有消肿！！！"

    };
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    //divEditors组件
    sendMessage(val) {
      // const message = this.$refs.message;
      // message.textContent = val;
      // console.log(val)
    }
  }
};
</script>
<style scoped>
#app {
  display: flex;
  justify-content: center;
}
.demo {
  padding: 10px 0;
}
.publish-box {
  width: 850px;
}
.publish-title {
  text-align: center;
}
.message {
  border: 1px solid;
  height: 400px;
  overflow: auto;
}

.backorg {
  background-color: #f06048;
}
.longe {
  height: 20px;
}
.con_aon {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.ta_list {
  width: 900px;
}
.ta_list .top {
  width: 900px;
  background-color: #ffffff;
}
.list {
  width: 900px;
  background-color: #ffffff;
  margin-top: 10px;
}
.d_ofne_e {
  width: 140px;
  padding-top: 10px;
  padding-left: 20px;
}
.tat_aa_e .sj {
  font-size: 14px;
  color: #a0a0a0;
  cursor: pointer;
}
.tat_aa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  margin-top: 10px;
}
.tat_aa span {
  font-size: 18px;
  text-align: center;
}
.tat_aa_e {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 35px;
  margin-top: 10px;
  line-height: 25px;
}
.tat_aa_e span {
  font-size: 18px;
  text-align: center;
}
.topen_e img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
}
.ado_oo {
  width: 746px;
  margin: 0 auto;
}
.ado_oo p {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #313131;
  line-height: 30px;
}
.ado_oo span {
  color: #f06048;
}
.afafaafafaf,
.box {
  display: flex;
  justify-content: space-between;
}
.opt {
  width: 58px;
  height: 22px;
  color: #f06048;
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  position: relative;
  top: 20px;
  right: 42px;
}
.ado_oolhed {
  display: flex;
}
.first_nei{
  display: flex;
}
.first_dz{
  display: flex;
  justify-content: space-between;
  margin-left: 72px;
}
.first_san{
  width: 100%;
  background-color: rgb(230, 230, 220);
  padding: 5px 0px 5px 10px;
  margin: 10px 0px 10px 72px;
}
.first_san span:nth-child(1){
  color: rgb(180, 180, 180);
  margin-right: 5px;
}
.first_san span:nth-child(2){
  color: blue;
}
</style>